import { defineStore } from "pinia";
import { ref, toRefs } from "vue";
import indexDBStore from "./indexDBStore";
import { importJson, exportJson } from '@/utils/exportImport'
import { getInterface, saveInterface, 
    listBackgroundImage, getBackgroundImage, 
    addBackgroundImage as addBackgroundImageApi, delBackgroundImage as delBackgroundImageApi, 
    exportBackgroundImage, importBackgroundImage 
} from "@/api/interface"

const interfaceStore = defineStore('interfaceStore', () => {

    const indexedDB = indexDBStore()

    const form = ref({
        size: 100,
        backgroundImageId: '',
        backgroundColor: '#fff',
        fontColor: "#000"
    })

    const backgroundImageList = ref([])

    const currentBackgroundImage = ref('')

    watch(() => indexedDB.isOpenDB, (newVal) => {
        if (newVal) reflushBackgroundImageList()
        if (newVal) getBackgroundImage(form.value.backgroundImageId).then(res => {
            currentBackgroundImage.value = res.url
        })
    })

    for (const [key, val] of Object.entries(form.value)) {
        watch([
            () => form.value[key]
        ], () => {
            saveInterface(form.value)
            if (key === 'backgroundColor' || key === 'fontColor') {
                const style = document.documentElement.style
                style.setProperty('--lan-main-background-color', form.value.backgroundColor);
                style.setProperty('--lan-main-font-color', form.value.fontColor);
            } else if (key === 'backgroundImageId' && indexedDB.isOpenDB) {
                getBackgroundImage(form.value.backgroundImageId).then(res => {
                    currentBackgroundImage.value = res.url
                })
            }
        })
    }

    //初始化form
    getInterface().then(res => {
        if (res) {
            for (const [key, val] of Object.entries(res)) {
                form.value[key] = val
            }
            if(form.value.backgroundId) {
                form.value.backgroundImageId = form.value.backgroundId
                delete form.value.backgroundId
            }
        }
    })

    /**
     * 刷新背景图片列表
     */
    function reflushBackgroundImageList() {
        listBackgroundImage().then(res => {
            backgroundImageList.value = res
        })
    }

    /**
     * 添加背景图
     * @param {File} file 文件对象
     */
    async function addBackgroundImage(file) {
        addBackgroundImageApi(file).then(res => {
            reflushBackgroundImageList()
        })
    }

    /**
     * 删除指定ID的图片
     * @param {String | Number} id 图片的ID
     */
    function delBackgroundImage(id) {
        delBackgroundImageApi(id).then(res => {
            reflushBackgroundImageList()
        })
    }

    /**
     * 导出背景数据
     */
    function exportInterfaceStore() {
        exportBackgroundImage().then(res => {
            exportJson({ form: form.value, backgroundImageList: res }, 'theme.json');
        })
    }

    /**
     * 导入背景数据
     */
    function importInterfaceStore() {
        importJson((data) => {
            if (data.form === undefined || data.backgroundImageList === undefined) throw new Error()
            for (const item of data.backgroundImageList) {
                importBackgroundImage(item).then(res => {
                    reflushBackgroundImageList()
                })
            }
            for (const [key, val] of Object.entries(data.form)) {
                form.value[key] = val
            }
        })
    }

    return { ...toRefs(form.value), backgroundImageList, currentBackgroundImage, addBackgroundImage, delBackgroundImage, exportInterfaceStore, importInterfaceStore }

})

export default interfaceStore